<template>
  <div id="admin" class="main-box">
    <el-button
      type="primary"
      style="margin-bottom: 16px"
      icon="el-icon-plus"
      @click="open"
    >
      新增会员组
    </el-button>
    <BaseTable :request="request" ref="baseTable">
      <el-table-column prop="id" label="ID" width="120px" />
      <el-table-column prop="title" :label="$t('标题')" />
      <el-table-column prop="desc" label="描述" />
      <el-table-column prop="create_time" label="添加时间" />
      <el-table-column prop="update_time" label="修改时间" />
      <el-table-column
        :label="$t('操作')"
        width="100px"
        fixed="right"
        align="right"
      >
        <template slot-scope="scope">
          <EditBtn @click="editUserGroup(scope.row)" />
          <DelBtn
            @success="delUserGroup(scope.row)"
            confirm-content="此操作将永久删除此分组, 是否继续?"
          />
        </template>
      </el-table-column>
    </BaseTable>
    <BaseDialog
      :title="adminForm.id ? '编辑会员组' : '添加会员组'"
      :dialog-show.sync="dialogAdmin"
      :width="'50'"
      footer
      @submit="submit"
    >
      <el-form
        ref="adminForm"
        :model="adminForm"
        :rules="adminRules"
        label-position="top"
      >
        <el-form-item label="标题：" prop="title">
          <el-input v-model="adminForm.title" placeholder="请输入会员组标题" />
        </el-form-item>
        <el-form-item label="描述：" prop="desc">
          <el-input v-model="adminForm.desc" type="textarea" />
        </el-form-item>
      </el-form>
    </BaseDialog>
  </div>
</template>
<script>
import userApi from '@/api/users.js'
export default {
  data() {
    return {
      request: userApi.userGroupList,
      activeName: 'first',
      tableData: [],
      dialogAdmin: false,
      adminForm: {
        title: '',
        desc: '',
        id: ''
      }, // 新增会员组表单
      adminRules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }]
      }
    }
  },

  methods: {
    open() {
      this.dialogAdmin = true
      this.adminForm = {
        title: '',
        desc: '',
        id: ''
      }
    },
    editUserGroup(row) {
      this.dialogAdmin = true
      this.adminForm = row
    },
    delUserGroup(row) {
      userApi.userGroupDel({ id: row.id }).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.getList('search')
        }
      })
    },
    // 获取列表
    getList(type) {
      this.$refs.baseTable.getList(type)
    },

    // 提交
    submit() {
      this.$refs.adminForm.validate(valid => {
        if (valid) {
          if (!this.adminForm.id) {
            userApi
              .userGroupAdd({
                ...this.adminForm
              })
              .then(res => {
                if (res.code === 0) {
                  this.$message.success(res.msg)
                  this.dialogAdmin = false
                  this.getList('search')
                }
              })
          } else {
            userApi.userGroupEdit({ ...this.adminForm }).then(res => {
              if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogAdmin = false
                this.getList()
              }
            })
          }
        } else {
          this.$message.warning(this.$t('请填写必要信息'))
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-table {
  margin-bottom: 20px;
}
</style>
